<template>
  <div class="boss">
    <head-page :title="`${this.$route.query.title }`"   style="border-bottom: 2px solid #dad9df;">
			<img src="../../assets/black_dian.png" alt="" />
		</head-page>
        <div class="video">
			<video-player
				style="
					height: 100%;
					margin: 0 auto;
					box-shadow: 5px 5px 8px #888888;
				"
				class="video-player vjs-custom-skin"
				ref="videoPlayer"
				:playsinline="true"
				:options="playerOptions"
			></video-player>
		</div>
  </div>
</template>

<script>
import { getVideoUrl } from "@/api/index"
export default {
    data() {
		return {
			tex: '',
			videourl:this.$route.query.videourl,
			playerOptions: {
				playbackRates: [0.7, 1.0, 1.5, 2.0],
				autoplay: false,
				muted: false,
				loop: false,
				preload: 'auto',
				language: 'zh-CN',
				aspectRatio: '16:9',
				fluid: true,
				sources: [{
					type: "video/mp4",
					src: ''
				}],
				poster: "",

				notSupportedMessage: '此视频暂无法播放，请稍后再试',
				controlBar: {
					timeDivider: true,
					durationDisplay: true,
					remainingTimeDisplay: false,
					fullscreenToggle: true
				},

			},
			list: [],
			
		}
	},
    methods:{
        getImgUrl(img) {
			return this.montageImgUrl(img)
		},
    },
    mounted() {
		getVideoUrl({
			Id:this.$route.query.imgid
		}).then(res => {
                if (res.data.code == 200) {
				 this.list = res.data.msg
				this.playerOptions.sources[0].src = `http://39.104.68.3:8080${this.list}`
			}
		})
	},
}
</script>

<style scoped>
.boss{
    width: 100%;
    height: 6rem;
}
.top h3 img {
	width: 0.2rem;
	margin-right: 0.05rem;
}
/* 视频区域  */
.video {
	width: 100%;
	height: 2rem;
    margin-top: .2rem;
  
}
</style>